﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>经典图库_侠盗飞车4中文主题站 | { Www.iGTA4.Com }</title>
	<link href="css/reset.css" rel="stylesheet" type="text/css" />
	<link href="css/text.css" rel="stylesheet" type="text/css" />
	<link href="css/960.css" rel="stylesheet" type="text/css" />
	<link href="css/dark-hive/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />
	<style type="text/css">
		ul, ol, li { list-style-position: inside; list-style-type: none; display: inline-table; *+float:left !important;}		
		#fotoContainer li{width:195px;  min-height:200px; vertical-align:top; overflow:hidden; padding:10px; margin:0; border-right:1px dotted #2F2B2B; border-bottom:1px dashed #2F2B2B;}
		#fotoContainer p.desc{height:130px;*+height:120px !important; overflow:hidden; text-overflow:ellipsis; display:block;}
		#fotoContainer li p.headr{background:#68AA1A; height:20px; line-height:20px; cursor:move;}
		#fotoContainer span{width:140px; overflow:hidden;  display:inline-block;}
		.nowrap{white-space:nowrap; word-break:keep-all; text-overflow:ellipsis;overflow:hidden;}
		#fotoContainer li img { width: 70px; height: 70px; border: 0; margin: 10px; }		
	</style>
</head>
<body>	
<div class="container_12">
	<!-- end .grid_2 -->
	<div class="grid_10">		
		<ul id="fotoContainer">			
		</ul>		
	</div>
	<!-- end .grid_10 -->
	<div class="grid_2">
		<p>
			菜单
		</p>
		<ul>
			<li><button>保存编辑</button></li>
			<li><button id="delFoto">删除图片</button></li>
			<li>上传图片</li>
		</ul>
	</div>
</div>	

	<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>

	<script src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>

	<script src="js/jquery.editinplace.js" type="text/javascript"></script>

	<script type="text/javascript">
		$(function() {
			$('#fotoContainer input').buttonset();
			$('#delFoto').click(function() {
				  //$('#fotoContainer
			});

			$.ajax({
				url: '../data.xml',
				context: document.body,
				//data:,
				dataType: 'xml',
				type: 'GET',
				error: function(XMLHttpRequest,textStatus,errorThrown) {
					console.log(textStatus);
				},
				success: ajaxCB
			});

			function ajaxCB(xml) {
				var img=$(xml).find("file");

				fetchFoto(img);
			}


			function fetchFoto(img) {
				var imgName=new Array(),thumb=new Array(),imgSrc=new Array();


				for(var i=0;i<img.length;i++) {
					imgName.push(img.eq(i).attr('name'));
					thumb.push(img.eq(i).attr('thumb'));
					imgSrc.push(img.eq(i).attr('file'));

					$('#fotoContainer').append('<li><p class="headr"></p><img src="../'+imgSrc[i]+'" alt="" /><p>	<input type="checkbox" name="sel" /><span class="nowrap">'+imgName[i]+'</span></p><p class="desc">'+img.eq(i).text()+'</p></li>');
				}
				$('#fotoContainer li:odd').css('backgroundColor','#ffffff');
				$('#fotoContainer li:even').css('backgroundColor','#E3E6E2');

				$("#fotoContainer").sortable({ cursor: 'move',forcePlaceholderSize: true,opacity: 0.8 });
				$("#fotoContainer").disableSelection();

				$("p.desc").editInPlace({
					//url: "",
					//params: "",
					field_type: "textarea",
					textarea_rows: "8",
					textarea_cols: "18",
					callback: function(original_element,html,original) {
						var tmp=original_element;

						$.ajax({
							type: "GET",
							url: "index.html?rand="+Math.random(),
							//data: ,
							success: function(msg) {
								alert("Data Saved.");
							}
						});
						return (html);
					}
				});

				$("#fotoContainer span").editInPlace({
					bg_over: "#cff",
					callback: function(original_element,html,original) {
						return (html);
					}
				});
			}


		});
		</script>

</body>
</html>
